<html> 
  <head> 
    <title>PicTerrain</title> 
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../math/point2d.js"></script>
    <script type="text/javascript" src="../math/vector2d.js"></script>
    <script type="text/javascript" src="../draw/picterrain.js"></script>
    <script type="text/javascript">
        var trn;
        var context;
        
        function onTimer() {
    		trn.draw( context);
    	}
    	
     	$(document).ready( function() {
     	    var elem = $("#myCanvas")[0];
    		if ( !elem || !elem.getContext)
    			return;
    		context = elem.getContext('2d');
    		
    		trn = new PicTerrain( "/gems/map/jinchun/", 13000, 7421, 29, 51);
    		trn.setPos( 0, 0);
    		trn.setVisibleArea( 0, 0, 1024, 600);
    		setInterval( "onTimer()", 33);
    		
    		    		
    		$("#myCanvas").click( function( event) {
    			//trn.setVisibleArea( event.screenX, event.screenY, 1024, 600);
    			var dx = event.screenX - 512;
    			var dy = event.screenY - 300;
    			trn.translateVisible( dx, dy);
    		});
    		
    	});
		</script> 
  </head> 
  <body> 
    <canvas id="myCanvas" width="1024" height="600">
    	Your browser does not have support for Canvas.
    </canvas>
  </body> 
</html> 